<!-- 线上店铺列表 -->
<template>
	<view class="container">
		<!-- <view class="header" >
			<uni-nav-bar statusBar="true" @clickLeft="back" color="#fff" leftIcon="back" background="inherit">
				<view class="navTitle">
					<text>线下门店</text>
					<text>STORE CONSUMPTION</text>
				</view>
			</uni-nav-bar>
			<view class="logoBox" @tap="back">
				<image src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png" mode=""></image>
				<view class="title">
					<text>普惠社区</text>
					<text>PUHUISHEQU</text>
				</view>
			</view>
		</view> -->

		<view class="select__body">
			<!-- 定位搜索 -->
			<view class="searchBox">
				<view class="search">
					<icon :type="iconType" size="18" />
					<input type="text" placeholder="搜索您喜爱的商户" placeholder-class="search-input-hoder" confirm-type="search" v-model="keyWords"
					 @confirm="searchTo" />
				</view>
				<!-- <view class="classify" @tap="goCate">
					<image src="/static/images/index/index_cate.png" mode="aspectFit"></image>
				</view> -->
			</view>
			<!-- 商户分类 -->
			<view class="storeCate">
				<scroll-view class="scroll__view" scroll-x="true">
					<view class="list">
						<view v-if="active == 2" @tap="clickCate(2)" class="item">
							<text :class="active == 2?'active':''">社区直营</text>
						</view>
						<view v-if="active == 1" @tap="clickCate(1)" class="item">
							<text :class="active == 1?'active':''">企业自营</text>
						</view>
						<!-- <view @tap="clickCate(index,item.sc_id)" class="item" v-for="(item,index) in homeData.cateList" :key="index">
							<text :class="active === index?'active':''">{{item.sc_name}}</text>
						</view> -->
					</view>
				</scroll-view>
			</view>
			<!-- 商户列表 -->
			<view class="storeList">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="item" v-for="(item,index) in storeList" :key="index" @tap="goDetail(item.seller_id)">
						<image lazy-load :src="item.online_logo" mode=""></image>
						<view class="infoBox">
							<view class="title">
								<view class="title__name">
									<image class="a" v-if="item.seller_type == 2" src="../../static/images/public/123.png" mode=""></image>
									<text class="name">{{item.online_name}}</text>
									<image class="b" src="/static/images/index/index_shophot.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="info__rate">
								<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
								 :size="15" :current="5" disabled></uni-rate>
								<!-- <text>{{item.consumers}}人来过</text> -->
							</view>
							<view class="info__type">
								<text style="padding: 0 2px;">下单送贝壳</text>
							</view>
							<view class="info__label">
								<view class="label_item" v-for="(it,ind) in item.label" :key="ind">{{it}}</view>
							</view>
						</view>
					</view>

					<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemConfig
	} from '@/api/public.js'

	import {
		sellerList
	} from "@/api/mall.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniLoadMore,
			uniNavBar
		},
		data() {
			return {
				type: 0,
				iconType: 'search',
				keyWords: '',
				active: 2,
				storeList: [],
				page: 1,
				limit: 5,
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				personal_shell_ration: 1,

			}
		},
		// onShareAppMessage() { //分享
		// 	if (!uni.getStorageSync("Authori-zation")) {
		// 		return {
		// 			title: uni.getStorageSync("share")[1].title,
		// 			path: '/pages/index/offline',
		// 			imageUrl: uni.getStorageSync("share")[1].url
		// 		}
		// 	} else {
		// 		return {
		// 			title: uni.getStorageSync("share")[1].title,
		// 			path: '/pages/index/offline?uid=' + uni.getStorageSync("userInfo").uid + "&uk=1",
		// 			imageUrl: uni.getStorageSync("share")[1].url
		// 		}
		// 	}
		// },
		onLoad(option) {
			if (option.type) {
				this.type = option.type
				this.active = option.type
			}
			systemConfig({
				filed: 'personal_shell_ration'
			}).then(res => {
				this.personal_shell_ration = Number(res.msg) / 100;
			})
			this.merchantList()
		},
		methods: {
			merchantList() {
				sellerList({
					keywords: this.keyWords,
					is_open_online: 1,
					seller_type: this.type,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.loadStatus = "more";
					let list = res.data.list.map((val, key) => {
						if (val.rebate_proportion) {
							val.rebate_proportion = ((100 - Number(val.rebate_proportion)) * this.personal_shell_ration).toFixed(2)
						}
						return val
					})
					this.storeList.push.apply(this.storeList, list);
					if (list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.storeList.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					}
				})
			},
			clickCate(type) {
				this.page = 1
				this.loadStatus = "loading"
				this.storeList = []
				this.active = type
				this.type = type
				this.merchantList()
			},
			lower() {
				if (this.loadStatus == "more")
					(this.loadStatus = "loading"), this.merchantList();
			},
			searchTo() {
				this.page = 1
				this.loadStatus = "loading"
				this.storeList = []
				this.merchantList()
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/mall/product/onlineStore?id=" + id
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.container {
		// .header {
		// 	background: url(../../static/images/index/bg.png) no-repeat;
		// 	background-size: 100% 420rpx;
		// 	position: relative;
		// 	height: 304rpx;
		// 	box-sizing: border-box;

		// 	.navTitle {
		// 		width: 100%;
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		line-height: 30rpx;

		// 		text:nth-of-type(1) {
		// 			font-size: 32rpx;
		// 			letter-spacing: 3rpx;
		// 		}

		// 		text:nth-of-type(2) {
		// 			letter-spacing: 2rpx;
		// 			margin-top: 6rpx;
		// 			font-size: 16rpx;
		// 			font-weight: bold;
		// 		}
		// 	}

		// 	.logoBox {
		// 		position: absolute;
		// 		right: 20rpx;
		// 		bottom: 50rpx;
		// 		height: 35px;
		// 		display: flex;
		// 		justify-content: center;
		// 		align-items: center;

		// 		image {
		// 			display: block;
		// 			width: 46rpx;
		// 			height: 48rpx;
		// 		}

		// 		.title {
		// 			margin: 0 10rpx;
		// 			display: flex;
		// 			flex-direction: column;
		// 			justify-content: center;
		// 			color: #fff;

		// 			text:nth-of-type(1) {
		// 				font-size: 11px;
		// 				letter-spacing: 1px;
		// 			}

		// 			text:nth-of-type(2) {
		// 				letter-spacing: 1.1px;
		// 				margin-top: 3rpx;
		// 				font-size: 5px;
		// 				font-weight: bold;
		// 			}
		// 		}
		// 	}
		// }

		.select__body {
			position: relative;
			z-index: 1;
			overflow: hidden;
			box-sizing: border-box;
			height: 100vh;

			.searchBox {
				background: #fff;
				display: flex;
				padding: 0 30rpx;
				height: 100rpx;
				align-items: center;

				.search {
					width: 100%;
					position: relative;

					icon {
						position: absolute;
						top: 17rpx;
						left: 20rpx;
					}

					input {
						padding-left: 80rpx;
						height: 70rpx;
						border-radius: 35rpx;
						background-color: #f5f5f5;
					}

					.search-input-hoder {
						color: rgba(153, 153, 153, 1);
						font-size: 28rpx;
					}
				}

				// .classify {
				// 	position: relative;
				// 	z-index: 15;

				// 	image {
				// 		padding-right: 20rpx;
				// 		width: 37rpx;
				// 		height: 37rpx;
				// 		// background-color: $theme-color;
				// 		vertical-align: middle;
				// 	}
				// }
			}

			.storeCate {
				background: #fff;
				position: relative;
				z-index: 66;
				padding: 0 30rpx;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
					box-shadow: 0px 6rpx 6rpx 0px rgba(0, 0, 0, 0.05);

				.scroll__view {
					width: 100%;
				}

				.list {
					display: flex;

					.item {
						padding: 0 30rpx;
						white-space: nowrap;
						font-size: 30rpx;

						.active {
							color: $theme-color;
							position: relative;
						}

						.active:after {
							content: '';
							position: absolute;
							height: 6rpx;
							width: 20rpx;
							border-radius: 3rpx;
							background-color: $theme-color;
							bottom: -10rpx;
							left: 50%;
							margin-left: -10rpx;
						}
					}

					.item:nth-of-type(1) {
						padding-left: 0;
					}
				}
			}

			.storeList {
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				position: absolute;
				top: 200rpx;
				bottom: 0;

				.scroll-Y {
					height: 100%;
				}

				.item {
					box-sizing: border-box;
					width: 690rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #fff;
					margin: 32rpx 0;
					box-shadow: 0px 0rpx 10rpx 0px rgba(0, 0, 0, 0.05);

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}

					.infoBox {
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 470rpx;

						.title {
							display: flex;
							justify-content: space-between;

							.title__name {
								letter-spacing: 0.5rpx;
								font-weight: bold;
								color: rgba(51, 51, 51, 1);
								font-size: 28rpx;
								max-width: 470rpx;
								display: flex;
								align-items: center;

								.a {
									width: 70rpx;
									height: 28rpx;
									margin-right: 10rpx;
								}

								.name {
									max-width: 344rpx;
									height: 40rpx;
									line-height: 40rpx;
									overflow: hidden;
									display: block;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.b {
									width: 26rpx;
									height: 30rpx;
									margin-left: 10rpx;
								}
							}
						}

						.info__rate {
							.rate {
								margin-right: 30rpx;
							}

							text {
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(51, 51, 51, 1);
							}
						}

						.info__type {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);

							text {
								width: 91rpx;
								height: 31rpx;
								line-height: 31rpx;
								text-align: center;
								border: 1rpx solid rgba(255, 66, 75, 1);
								border-radius: 5rpx;
								font-size: 20rpx;
								color: rgba(255, 66, 75, 1);
								margin-right: 8rpx;
							}
						}

						.info__label {
							height: 45rpx;
							max-width: 344rpx;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							text-overflow: ellipsis;

							.label_item {
								display: inline-block;
								background: rgba(230, 84, 49, 1);
								border-radius: 4rpx;
								padding: 4rpx 6rpx;
								color: #FFFFFF;
								font-size: 20rpx;
								margin-right: 15rpx;
							}
						}

						.info {
							display: flex;
							justify-content: space-between;
							font-size: 20rpx;

							.left {
								color: #999;

								text:nth-of-type(1) {
									margin-right: 20rpx;
								}
							}

							.right {
								font-size: 26rpx;
								color: $theme-color;
							}
						}

						.detail {
							font-size: 24upx;
							color: #333;
							display: flex;
							justify-content: space-between;

							text:nth-of-type(1) {
								width: 320rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							text:nth-of-type(2) {
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style>
